/**
 * React Native WebSocket调试客户端使用示例
 * 
 * 使用步骤：
 * 1. 复制 debugClient-websocket.js 到您的项目
 * 2. 修改其中的服务器IP地址
 * 3. 在App中导入此文件
 * 4. 使用 global.$debug 进行日志记录
 */

import React, { useEffect, useState } from 'react'
import { View, Text, Button, Alert, StyleSheet } from 'react-native'

// 导入WebSocket调试客户端（零依赖版本）
import './debugClient-websocket' // 确保路径正确

const WebSocketDebugExample: React.FC = () => {
  const [connectionStatus, setConnectionStatus] = useState('unknown')

  useEffect(() => {
    // 页面加载时记录日志
    global.$debug.pageEvent('WebSocketExample', 'mounted')
    
    // 测试连接状态
    checkConnection()
    
    return () => {
      global.$debug.pageEvent('WebSocketExample', 'unmounted')
    }
  }, [])

  const checkConnection = async () => {
    global.$debug.info('🔍 检查调试连接状态...')
    
    try {
      const isConnected = await global.$debug.testConnection()
      const status = global.$debug.getStatus()
      
      setConnectionStatus(status.connected ? 'connected' : 'disconnected')
      
      global.$debug.info('📊 连接状态', {
        connected: status.connected,
        connectionType: status.connectionType,
        queuedLogs: status.queuedLogs,
        environment: status.environment
      })
      
    } catch (error) {
      global.$debug.errorLog(error, 'checkConnection')
      setConnectionStatus('error')
    }
  }

  const sendTestLogs = () => {
    global.$debug.userAction('send_test_logs', { source: 'button_click' })
    
    // 发送不同级别的日志
    global.$debug.debug('🐛 这是一个调试日志')
    global.$debug.info('ℹ️ 这是一个信息日志', { data: 'some info' })
    global.$debug.warn('⚠️ 这是一个警告日志')
    global.$debug.error('❌ 这是一个错误日志', new Error('测试错误'))
    
    // 发送表格数据
    global.$debug.table([
      { name: 'Alice', age: 25, city: 'New York' },
      { name: 'Bob', age: 30, city: 'London' },
      { name: 'Charlie', age: 35, city: 'Tokyo' }
    ], '用户数据表')
    
    Alert.alert('成功', '测试日志已发送，请查看调试面板')
  }

  const testPerformance = () => {
    global.$debug.userAction('test_performance')
    global.$debug.time('性能测试')
    
    // 模拟一些异步操作
    setTimeout(() => {
      global.$debug.timeEnd('性能测试')
      global.$debug.performanceLog('模拟异步操作', 1000, {
        operation: 'setTimeout',
        delay: 1000
      })
    }, 1000)
    
    Alert.alert('性能测试', '1秒后将记录性能日志')
  }

  const simulateNetworkRequest = async () => {
    global.$debug.userAction('simulate_network_request')
    global.$debug.time('网络请求')
    
    try {
      // 模拟网络请求
      const requestData = { userId: 123, action: 'fetch_profile' }
      global.$debug.info('📤 发送网络请求', requestData)
      
      // 模拟请求延迟
      await new Promise(resolve => setTimeout(resolve, 1500))
      
      const responseData = { 
        success: true, 
        user: { id: 123, name: 'Test User', email: 'test@example.com' }
      }
      
      global.$debug.timeEnd('网络请求')
      global.$debug.networkLog('GET', '/api/user/123', requestData, responseData, 1500)
      
      Alert.alert('成功', '模拟网络请求完成')
      
    } catch (error) {
      global.$debug.errorLog(error, 'simulateNetworkRequest')
      Alert.alert('错误', '网络请求失败')
    }
  }

  const clearLogs = async () => {
    global.$debug.userAction('clear_logs')
    await global.$debug.clear()
    Alert.alert('清除', '远程日志已清除')
  }

  const getStatusColor = () => {
    switch (connectionStatus) {
      case 'connected': return '#4CAF50'
      case 'disconnected': return '#FF9800'
      case 'error': return '#F44336'
      default: return '#9E9E9E'
    }
  }

  return (
    <View style={styles.container}>
      <Text style={styles.title}>WebSocket调试客户端示例</Text>
      
      <View style={styles.statusContainer}>
        <Text style={styles.statusLabel}>连接状态:</Text>
        <View style={[styles.statusIndicator, { backgroundColor: getStatusColor() }]} />
        <Text style={styles.statusText}>{connectionStatus}</Text>
      </View>
      
      <View style={styles.buttonContainer}>
        <Button title="检查连接" onPress={checkConnection} />
        <Button title="发送测试日志" onPress={sendTestLogs} />
        <Button title="性能测试" onPress={testPerformance} />
        <Button title="模拟网络请求" onPress={simulateNetworkRequest} />
        <Button title="清除日志" onPress={clearLogs} />
      </View>
      
      <Text style={styles.instructions}>
        请在浏览器中打开调试面板查看实时日志：{'\n'}
        http://10.240.20.130:3000/debug-panel.html
      </Text>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#f5f5f5',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    textAlign: 'center',
    marginBottom: 20,
  },
  statusContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: 20,
  },
  statusLabel: {
    fontSize: 16,
    marginRight: 10,
  },
  statusIndicator: {
    width: 12,
    height: 12,
    borderRadius: 6,
    marginRight: 8,
  },
  statusText: {
    fontSize: 16,
    fontWeight: 'bold',
  },
  buttonContainer: {
    gap: 10,
    marginBottom: 20,
  },
  instructions: {
    fontSize: 14,
    textAlign: 'center',
    color: '#666',
    fontStyle: 'italic',
  },
})

export default WebSocketDebugExample

